<!--
 * @Date: 2024-03-20 10:21:06
 * @Author: ljc
 * @LastEditors: g05047
 * @LastEditTime: 2025-01-14 19:33:36
 * @Description: 分类编辑弹框
-->
<template>
  <rk-dialog :="dialogOptions"
    :visible="visible"
    @close="visible = false">
    <template #default>
      <CategoryForm ref="categoryFormRef"
        :guid="guid"
        :funcType="funcType" />
    </template>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary"
        :loading="isLoading"
        @click="handleConfirm">确定</el-button>
    </template>
  </rk-dialog>
</template>

<script setup>
import { useCategoryApi } from '@/api';
import CategoryForm from '../component/CategoryForm.vue'
import { ElMessage } from 'element-plus';

const { saveSysClassify } = useCategoryApi()
// emits
const emits = defineEmits(['confirm', 'close']);
// 组件的传参
const props = defineProps({
  funcType: {
    type: String,
    default: '1',
  }
});
const guid = ref('')
// emits 相关
const emitConfirm = () => {
  emits('confirm');
};
const emitClose = () => {
  emits('close');
};
const isLoading = ref(false)

const modeOfTitle = {
  add: { value: 'add', title: '新增分类' },
  edit: { value: 'edit', title: '编辑分类' },
  info: { value: 'info', title: '查看分类' },
};
// ----- 弹出层相关配置
const config = reactive({
  type: modeOfTitle.add.value,
  title: modeOfTitle.add.title,
});
const dialogOptions = reactive({
  title: config.title,
  width: '60%',
  height: '75%',
  maskClosable: false,
  destroyOnClose: true,
})
// 显示隐藏弹窗
const visible = ref(false);
// 弹窗面板模式 add|edit|info
const categoryFormRef = ref(null);
/**
 * 对外暴露的添加方法
 *
 * @param {Object} param {
 * 
 * }
 */
const handleAdd = () => {
  guid.value = ''
  handleSetDialogTitle('add')
};
/**
 * 对外暴露的修改方法
 *
 * @param {Object} param {
 * }
 */
const handleEdit = (id) => {
  guid.value = id
  handleSetDialogTitle('edit')
};
/**
 * 对外暴露的查看方法
 *
 * @param {Object} param {
 * }
 */
const handleOpen = () => {
  handleSetDialogTitle('info')
};
/**
 * 设置弹框的标题
 */
const handleSetDialogTitle = (type) => {
  config.title = modeOfTitle[type].title
  config.type = modeOfTitle[type].value
  dialogOptions.title = config.title
  visible.value = true;
}
/**
 * 重置弹窗
 */
const handleReset = () => {
  visible.value = false;
};
/**
 * 关闭弹窗
 */
const handleClose = () => {
  handleReset();
  emitClose();
};
/**
 * 确认保存
 */
const handleConfirm = async () => {
  const formData = await categoryFormRef.value.getFormData()
  handleSave(formData)
};
/**
 * 保存数据
 *
 * @param {Object} formData 表单数据
 *  
 **/
const handleSave = async (formData) => {
  isLoading.value = true
  const { code, msg } = await saveSysClassify(formData)
  if (code === 200) {
    isLoading.value = false
    ElMessage.success('保存成功！')
    emitConfirm()
    handleReset()
  } else {
    isLoading.value = false
    ElMessage.error(msg || '保存失败！')
  }
};

defineExpose({
  handleAdd,
  handleEdit,
  handleOpen,
});
</script>

<style lang="scss" scoped>
</style>
